<style lang="scss" scoped>
	#sns {
		background-color: #F9F9F9;
		// font-family: ryfont !important;
	}

	// 推荐、咨询 按钮样式
	.tabs-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 750upx;

		// font-family: ryfont !important;
		.one-nav {
			width: 120upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	.header-box {
		position: relative;
		left: 0;
		z-index: 1;
		height: 350px;

		// 广告位轮播器相关样式
		.swiper {
			width: 750upx;
			height: 290px;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;

			.banner-swiper-img {
				width: 750upx;
				height: 245px;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			}
		}

		.crile {
			width: 750upx;
			height: 40upx;
			position: absolute;
			left: 0;
			top: 228px;
			z-index: 9;
		}

		// 新鲜事 活动墙 按钮样式
		.card-header {
			position: absolute;
			left: 0;
			top: 205px;
			height: 80px;
			z-index: 99;
			width: 710upx;
			margin-left: 20upx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.card-one {
				width: 328upx;
				height: 96upx;
				border-radius: 49upx;
				background-color: #fff;
				margin: 0 10upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;

				.img {
					width: 44upx;
					height: 44upx;
					margin-left: 50upx;
				}

				.iright {
					margin-left: 30upx;
					text-align: left;
					color: #888;

					.title {
						margin-top: 5upx;
						font-size: 30upx;
						color: #001432;
						// font-family: ryfont !important;
					}

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						font-size: 20upx;
						margin-top: -5upx;
					}


				}
			}
		}

		// 推荐、咨询 按钮样式
		.tabs-box {
			width: 750upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 300px;

			.one-nav {
				height: 40px;
				width: 110upx;
				color: #9B9B9B;
				font-size: 36upx;
				text-align: center;
				font-weight: blod;

				// font-family: ryfont !important;
				&.nav-actived {
					color: #0050FF;
				}
			}
		}
	}

	// 此刻 栏目样式
	.sns-now {

		// 动态相关瀑布流样式
		.feeds-box {
			width: 735upx;
			margin-left: 13upx;
			padding-bottom: 20upx;

			.feed-one {
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 10upx;

				position: relative;

				.feed-img {
					width: 358upx;
					border-radius: 10upx 10upx 0 0;

					&.h-img {
						height: 488upx;
					}

					&.w-img {
						height: 358upx;
					}
				}

				.feed-title {
					width: 350upx;
					margin-top: 15upx;
					margin-left: 10upx;
					font-size: 28upx;
					line-height: 40upx;
					color: #001432;
					text-align: left;
					// font-family: ryfont !important;
				}

				.fvicon {
					position: absolute;
					right: 10upx;
					top: 10upx;
					z-index: 1;

					.play-icon {
						width: 40upx;
						height: 40upx;
					}
				}

				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #666;
					padding: 0 10upx 16upx;

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;

						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60upx;
							padding: 0 10upx;
							background-color: #FFFFFF;
						}
					}

					.avatar {
						margin-right: 10upx;
						height: 40upx;
						width: 40upx;
						border-radius: 50%;
						border: 1upx solid #eee;
					}

					.name {
						max-width: 120upx;
						color: #757474;
					}

					.micon {
						width: 32upx;
						height: 28upx;
					}

					.love-count {
						padding-left: 10upx;
						color: #757474;
					}
				}
			}
		}
	}

	// 轮播页面 资讯
	.sns-news {
		background-color: #fff;
		width: 730upx;
		margin-left: 10upx;
		border-radius: 20upx;

		.one-new {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			align-content: center;
			width: 700upx;
			height: 120px;
			padding-bottom: 14px;
			padding-top: 10upx;
			padding-left: 25upx;
			padding-right: 25upx;
			// border-bottom: 1px solid #f2f2f2;

			.left {
				width: 490upx;
				text-align: left;

				.title {
					font-size: 30upx;
					line-height: 48upx;
					color: #001432;
					margin-top: 16upx;
				}

				.uinfo {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #999;

					.utime {
						font-size: 24upx;

						.name {
							max-width: 120upx;
							color: #777;
						}
					}
				}
			}

			.right {
				width: 170upx;

				.pic {
					width: 170upx;
					height: 170upx;
					margin-top: 20upx;
					border-radius: 6upx;
					// box-shadow: 0 0 2px 0 rgb(228, 228, 228);
				}
			}
		}
	}

	.model-card {
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: rgba($color: #000000, $alpha: 0.8);

		.card-img {
			width: 540upx;
			height: 670upx;
			position: fixed;
			left: 105upx;
			top: 15vh;
			z-index: 108;
			border-radius: 32upx;
		}

		.card-close {
			width: 112upx;
			height: 112upx;
			position: fixed;
			left: 319upx;
			bottom: 160upx;
			z-index: 108;
		}
	}
</style>
<template>
	<view id="sns">

		<!-- 顶部导航 -->
		<mnav-bar v-if="navBarShowTag">
			<view class="tabs-box" slot="left">
				<view class="one-nav" :class="swiperCurrent === 0 ? 'nav-actived' : '' " @click="tabChange(0)">推荐</view>
				<view class="one-nav" :class="swiperCurrent === 1 ? 'nav-actived' : '' " @click="tabChange(1)">资讯</view>
			</view>
		</mnav-bar>


		<!-- 顶部显示相关 -->
		<view class="header-box">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="item in findBannerSwiperList" :key="item.id" @tap="clickBanner">
					<navigator v-if="item.type == 'normal' " open-type="navigate"
						:url=" '/pages/webview?url='+item.linkid ">
						<image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
					</navigator>
					<navigator v-else open-type="navigate" :url=" '/feed/'+item.type +'?id=' + item.linkid ">
						<image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
					</navigator>
				</swiper-item>
			</swiper>
			<image class="crile" src="../static/crile.png" mode="aspectFill" />
			<view class="card-header">
				<view class="card-one card-left" @click="gotoLink('/pages/rfeeds')">
					<image class="img" src="../static/coffee.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">新鲜事</view>
						<view class="iview">
							<number-up :num="feedsNum" color="#666" width="10" fontSize="11" />
							<view>个分享</view>
						</view>
					</view>
				</view>
				<view class="card-one card-right" @tap.stop="gotoLink('/activities/index')">
					<image class="img" src="../static/ran.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">活动墙</view>
						<view class="iview">
							<number-up :num="activeNum" color="#66" width="10" fontSize="11" />
							<view>人参与</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tabs-box">
				<view class="one-nav" :class="swiperCurrent === 0 ? 'nav-actived' : '' " @click="tabChange(0)">推荐</view>
				<view class="one-nav" :class="swiperCurrent === 1 ? 'nav-actived' : '' " @click="tabChange(1)">资讯</view>
			</view>
		</view>

		<!-- 内容轮播导航 -->
		<swiper class="swiper-box" :style="{ height: swiperHeight+'px' }" :current="swiperCurrent"
			@animationfinish="animationfinish">
			<!-- 推荐 轮播页面 -->
			<swiper-item class="swiper-item">
				<view class="page-item sns-now">
					<view class="feeds-box">
						<h-waterfall v-model="feedList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="feed-one" v-for="(item, index) in leftList" :key="index">
									<!-- 资讯（ cover 封面模式 + medias 多图模式 ） -->
									<view v-if="item.type == 1"
										@tap.stop=" gotoLink( '/feed/info?id=' + item.data.id ) ">
										<!-- 咨询 有封面模式 -->
										<image class="feed-img" v-if="!!item.data.cover" :src="item.data.cover.url"
											:class="item.data.cover.dimension.height/item.data.cover.dimension.width > 1 ? 'h-img' : 'w-img' "
											mode="aspectFill" :lazy-load="true" />
										<!-- 咨询 无封面模式 -->
										<image class="feed-img" v-if="!item.data.cover && !!item.data.medias"
											:class="item.data.medias[0].image.dimension.height/item.data.medias[0].image.dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.medias[0].image.url" mode="aspectFill" :lazy-load="true" />

										<view class="fvicon">
											<image src="../static/essay.png" class="play-icon" />
										</view>

										<view class="u-line-2 feed-title" v-if="item.data.title">{{ item.data.title }}
										</view>
										<view class="feed-info">
											<view class="iview"
												@tap.stop=" gotoLink( '/feed/otherUser?id=' + item.data.user.id ) ">
												<image class="avatar" v-if="!!item.data.user.avatar"
													:src=" item.data.user.avatar.url ? item.data.user.avatar.url  : item.data.user.avatar " />
												<image class="avatar" v-else src="../static/ilogo.png" />
												<text
													class="name u-line-1">{{ item.data.user.name == 'admin' || item.data.user.name == 'root' ? '柔宇科技' : item.data.user.name }}</text>
											</view>
											<view class="iview">
												<view @click.stop="clickLove(item)" class="ilike">
													<image v-if="item.data.liked" src="../static/lover.png"
														class="micon" />
													<image v-else src="../static/love.png" class="micon" />
													<text class="love-count"
														v-if="item.data.likes_count>0">{{ item.data.likes_count }}</text>
												</view>
											</view>
										</view>
									</view>
									<!-- 动态 -->
									<view v-if="item.type == 2"
										@tap.stop="gotoLink(item.data.video?'/feed/video?id='+item.data.id:'/feed/feed?id='+item.data.id)">
										<!-- 动态无封面模式 -->
										<image class="feed-img" v-if="item.data.images.length > 0 "
											:class="item.data.images[0].dimension.height/item.data.images[0].dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.images[0].url" mode="aspectFill" :lazy-load="true" />
										<!-- 动态有封面模式 -->
										<image v-if="item.data.images.length <= 0 && !!item.data.video" class="feed-img"
											:class="item.data.video.cover.dimension.height/item.data.video.cover.dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.video.cover.url" mode="aspectFill" :lazy-load="true" />

										<view v-if=" item.data.images.length <= 0 && !!item.data.video" class="fvicon">
											<image src="../static/play.png" class="play-icon" />
										</view>
										<view class="u-line-2 feed-title" v-if="item.data.feed_content">
											{{ item.data.feed_content }}</view>
										<view class="feed-info">
											<view class="iview"
												@tap.stop="gotoLink('/feed/otherUser?id=' + item.data.user.id)">
												<image class="avatar" v-if="!!item.data.user.avatar"
													:src=" item.data.user.avatar.url ? item.data.user.avatar.url  : item.data.user.avatar " />
												<image class="avatar" v-else src="../static/ilogo.png" />
												<text class="name u-line-1">{{ item.data.user.name }}</text>
											</view>
											<view class="iview">
												<view @click.stop="clickLove(item)" class="ilike">
													<image v-if="item.data.has_liked" src="../static/lover.png"
														class="micon" />
													<image v-else src="../static/love.png" class="micon" />
													<text class="love-count"
														v-if="item.data.like_count>0">{{ item.data.like_count }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="feed-one" v-for="(item, index) in rightList" :key="index">
									<view v-if="item.type == 1" @tap.stop=" gotoLink('/feed/info?id=' + item.data.id )">
										<!-- 咨询 有封面模式 -->
										<image class="feed-img" v-if="!!item.data.cover" :src="item.data.cover.url"
											:class="item.data.cover.dimension.height/item.data.cover.dimension.width > 1 ? 'h-img' : 'w-img' "
											mode="aspectFill" :lazy-load="true" />
										<!-- 咨询 无封面模式 -->
										<image class="feed-img" v-if="!item.data.cover && !!item.data.medias"
											:class="item.data.medias[0].image.dimension.height/item.data.medias[0].image.dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.medias[0].image.url" mode="aspectFill" :lazy-load="true" />

										<view class="fvicon">
											<image src="../static/essay.png" class="play-icon" />
										</view>

										<view class="u-line-2 feed-title" v-if="item.data.title">{{ item.data.title }}
										</view>
										<view class="feed-info">
											<view class="iview"
												@tap.stop=" gotoLink( '/feed/otherUser?id=' + item.data.user.id ) ">
												<image class="avatar" v-if="!!item.data.user.avatar"
													:src=" item.data.user.avatar.url ? item.data.user.avatar.url  : item.data.user.avatar " />
												<image class="avatar" v-else src="../static/ilogo.png" />
												<text
													class="name u-line-1">{{ item.data.user.name == 'admin' || item.data.user.name == 'root' ? '柔宇科技' : item.data.user.name }}</text>
											</view>
											<view class="iview">
												<view @click.stop="clickLove(item)" class="ilike">
													<image v-if="item.data.liked" src="../static/lover.png"
														class="micon" />
													<image v-else src="../static/love.png" class="micon" />
													<text class="love-count"
														v-if="item.data.likes_count>0">{{ item.data.likes_count }}</text>
												</view>
											</view>
										</view>
									</view>
									<!-- 动态（图片类型） -->
									<view v-if="item.type == 2"
										@tap.stop="gotoLink(item.data.video?'/feed/video?id='+item.data.id:'/feed/feed?id='+item.data.id)">
										<!-- 动态无封面模式 -->
										<image class="feed-img" v-if="item.data.images.length > 0 "
											:class="item.data.images[0].dimension.height/item.data.images[0].dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.images[0].url" mode="aspectFill" :lazy-load="true" />
										<!-- 动态有封面模式 -->
										<image class="feed-img" v-if="item.data.images.length <= 0 && !!item.data.video"
											:class="item.data.video.cover.dimension.height/item.data.video.cover.dimension.width > 1 ? 'h-img' : 'w-img' "
											:src="item.data.video.cover.url" mode="aspectFill" :lazy-load="true" />

										<view v-if=" item.data.images.length <= 0 && !!item.data.video" class="fvicon">
											<image src="../static/play.png" class="play-icon" />
										</view>
										<view class="u-line-2 feed-title" v-if="item.data.feed_content">
											{{ item.data.feed_content }}</view>
										<view class="feed-info">
											<view class="iview"
												@tap.stop=" gotoLink( '/feed/otherUser?id=' + item.data.user.id ) ">
												<image class="avatar" v-if="!!item.data.user.avatar"
													:src=" item.data.user.avatar.url ? item.data.user.avatar.url  : item.data.user.avatar " />
												<image class="avatar" v-else src="../static/ilogo.png" />
												<text class="name u-line-1">{{ item.data.user.name }}</text>
											</view>
											<view class="iview">
												<view @tap.stop="clickLove(item)" class="ilike">
													<image v-if="item.data.has_liked" src="../static/lover.png"
														class="micon" />
													<image v-else src="../static/love.png" class="micon" />
													<text class="love-count"
														v-if="item.data.like_count>0">{{ item.data.like_count }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
						</h-waterfall>
					</view>
				</view>
			</swiper-item>

			<!-- 咨询 轮播页面 -->
			<swiper-item class="swiper-item sns-news">
				<view v-for="(item, index) in infoList" :key="index">
					<navigator open-type="navigate" :url=" '/feed/info?id=' + item.id " class="one-new">
						<view class="left">
							<view class="title u-line-2">{{item.title}}</view>
							<view class="uinfo">
								<view class="iview">
									<view class="utime">
										<text
											class="name">{{ item.user.name == 'admin' || item.user.name == 'root' ? '柔宇科技' : item.user.name }}</text>
										<!-- <text class="name">{{item.user.name}}</text> -->
									</view>
								</view>
								<!-- <view class="iview">
									<text class="uptime">{{ item.created_at | timeFormate }}发布</text>
								</view> -->
							</view>
						</view>
						<view class="right">
							<image class="pic" mode="aspectFill"
								:src=" item.cover ?  item.cover.url : item.medias[0].image.url " />
						</view>
					</navigator>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分享按钮及其相关逻辑 -->
		<goto-share />
		<cover-view class="model-card" @touchmove.stop.prevent="moveHandle"
			v-if="activeCardShow && modelCard.imgsrc != ''">
			<cover-image class="card-img" :src="modelCard.imgsrc" mode="aspectFill" @tap.stop="goToPage()" />
			<cover-image class="card-close" src="../static/close.png" mode="aspectFill" @tap.stop="closeActiveCard" />
		</cover-view>
		<!-- 未登录登陆组件 -->
		<login ref="login"></login>
	</view>
</template>

<script>
	import {
		$storage
	} from "@/utils";
	import timeFrom from "../uview-ui/libs/function/timeFrom.js";
	import gotoShare from "../components/basic/gotoShare.vue";
	import hWaterfall from "../components/basic/h-waterfall.vue"
	export default {
		data() {
			return {
				// 活动卡片是否显示
				activeCardShow: false,
				// 首次登陆进入发布会倒计时提醒
				modelCard: {
					imgsrc: '',
					url: ''
				},
				// 是否显示 navbar
				navBarShowTag: false,
				// 记录轮播页面位置
				swiperCurrent: 0,
				// 内部距离顶部高度
				swiperHeight: 0,
				oldFeedSwiperHeight: 0,
				oldInfoSwiperHeight: 0,
				// 记录滚动位置
				scrollTop: 0,
				oldFeedScrollTop: 0,
				oldInfoScrollTop: 0,

				// 记录 发现页面 banner 轮播列表信息
				findBannerSwiperList: [],
				// 新鲜事及活动的条数
				feedsNum: 0,
				activeNum: 0,
				// 记录 发现页面 分享评论 相关列表信息
				feedList: [],
				saveFeedList: [],
				// 记录请求 feed 状态
				canRequestFeeds: "yes",
				// 点赞状态器
				canLoveTag: true,
				// 新闻资讯列表
				infoList: [],
				// 记录请求 feed 状态
				canRequestInfos: "yes",

			};
		},
		components: {
			gotoShare,
			hWaterfall
		},
		// 时间过滤器
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		async onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})

			let loginTag = await this.$u.api.checkLogin();
			// 获取初始化相关数据
			this.getDatas();

			// 设置计时器，1分钟更新一次用户未读消息提醒
			if (loginTag) {
				this.getUserInfo();
				setInterval(() => {
					this.getUserInfo();
				}, 60000)
			}
			// 根据瀑布流计算结果动态设置轮播器高度
			uni.$on("getHeight", hobj => {
				if (hobj.lh > hobj.rh) {
					this.swiperHeight = hobj.lh + 350;
				} else {
					this.swiperHeight = hobj.rh + 350;
				}
				// 记录旧值
				this.oldFeedSwiperHeight = this.swiperHeight;
			});
			// 事件 bus 删除动态事件触发
			uni.$on("removeOneFeed", fid => {
				this.feedList = this.saveFeedList;
				this.feedList.map((one, index) => {
					if (one.type == 2 && one.data.id == fid) {
						console.log("触发了一次删除元素操作")
						this.$refs.uWaterfall.remove(one.id);
						this.feedsNum--;
						this.saveFeedList.splice(index, 1);
						this.feedList = this.saveFeedList;
					}
				});
			});
			uni.$on("addOneFeed", () => {
				this.feedsNum++;
			})
			// 事件 bus 点赞数据发生修改触发首页点赞条数的修改
			uni.$on("indexLoveChange", (item) => {
				this.feedList.map((one) => {
					if (
						(one.type == 1 && item.type == "info") ||
						(one.type == 2 && item.type == "feeds")
					) {
						if (one.data.id == item.data.id) {
							this.$refs.uWaterfall.modify(one.id, "data", item.data);
						}
					}
				});
			});
			// 如果登陆成功后则触发这个方法
			uni.$on("after:login", async () => {
				this.$refs.login.close(true);
				this.activeCardShow = true;
				this.$refs.uWaterfall.clear();
				this.getDatas();
				this.getUserInfo();
				setInterval(() => {
					this.getUserInfo();
				}, 120000)
				let swiperList = await this.$u.api.getAdverbanner({
					space: "1",
				});
				// uni.hideTabBar();
				if (swiperList.length > 0) {
					this.modelCard.imgsrc = swiperList[0].data.image;
					this.modelCard.url = swiperList[0].data.link;
				}
			});
		},
		// 分享到朋友圈设置
		onShareTimeline() {
			return {
				title: '柔性星球 - 等你来登陆',
				query: '',
				imageUrl: ''
			}
		},
		onPullDownRefresh() {
			this.onRefresh();
			let timer = setTimeout(function() {
				uni.stopPullDownRefresh();
				clearTimeout(timer);
			}, 1000);
		},
		onReachBottom() {
			this.onreachBottom();
		},
		onPageScroll(scrollTop) {
			let stop = scrollTop.scrollTop
			// if(this.swiperCurrent == 0){
			// 	this.oldFeedScrollTop = stop;
			// }else{
			// 	this.oldInfoScrollTop = stop;
			// }
			if (scrollTop.scrollTop >= 320) {
				this.navBarShowTag = true;
				this.oldFeedScrollTop = 340;
				this.oldInfoScrollTop = 340;
			} else {
				this.navBarShowTag = false;
				this.oldFeedScrollTop = stop;
				this.oldInfoScrollTop = stop;
			}
		},
		async onShow() {
			// 数据埋点
			this.$$Rangers.event('page_view', {
				platform: '小程序',
			})
			// 如果切换到瀑布流轮播
			if (this.swiperCurrent == 0) {
				this.swiperHeight = this.oldFeedSwiperHeight;
			} else {
				this.swiperHeight = this.oldInfoSwiperHeight;
			}
		},
		methods: {
			// 阻止蒙版穿透滚动行为
			moveHandle() {
				return
			},
			closeActiveCard() {
				this.activeCardShow = false;
				uni.showTabBar();
			},
			goToPage() {
				uni.showTabBar()
				uni.navigateTo({
					url: '/pages/webview?url=' + encodeURI(this.modelCard.url)
				});
			},
			// 顶部下拉刷新
			async onRefresh() {
				console.log("顶部下拉更新数据");
				this.getUserInfo();
				// uni.hideToast();
				uni.showToast({
					title: "数据更新中...",
					icon: "loading",
					duration: 2000
				});
				// 获取初始化相关数据
				this.getDatas();
				// 获取 咨询信息列表
				let infoList = await this.$u.api.getInfos({
					limit: 8,
					offset: 0,
				});
				this.infoList = [];
				this.$refs.uWaterfall.clear();
				this.infoList = infoList;
				this.canRequestInfos = "yes";
				this.oldInfoSwiperHeight = this.infoList.length * 150;
			},
			// 获取初始化的数据
			async getDatas() {
				// 异步获取 所有动态条数
				let feedListInfo = await this.$u.api.getNewStorys({
					page: 1,
					limit: 1
				});
				this.feedsNum = feedListInfo.meta.total;

				// 获取 活动参与的条数
				let actNum = await this.$u.api.getActivityJoinNum();
				this.activeNum = actNum.data.count;

				// 获取顶部 banner
				let swiperList = await this.$u.api.getAdverbanner({
					space: "3",
				});
				let useSwiperList = [];
				for (let i = 0; i < swiperList.length; i++) {
					if (!!swiperList[i].data.link) {
						if (swiperList[i].data.link.indexOf("feed") > -1) {
							swiperList[i].type = "feed";
							swiperList[i].linkid = swiperList[i].data.link.split(":")[1];
						} else if (swiperList[i].data.link.indexOf("info") > -1) {
							swiperList[i].type = "info";
							swiperList[i].linkid = swiperList[i].data.link.split(":")[1];
						} else {
							swiperList[i].type = "normal";
							swiperList[i].linkid = encodeURIComponent(swiperList[i].data.link);
						}
						useSwiperList.push(swiperList[i]);
					}
				}

				this.findBannerSwiperList = useSwiperList;
				// 获取 动态列表
				uni.showToast({
					title: "数据请求中...",
					icon: "loading",
					mask: true,
					duration: 500,
				});
				this.feedList = await this.$u.api.getRecommendList({
					category: 0,
					limit: 6,
					offset: 0,
				});
				this.saveFeedList = this.feedList;
				this.canRequestFeeds = "yes";

				// 获取 咨询信息列表
				this.infoList = await this.$u.api.getInfos({
					limit: 8,
					offset: 0,
				});
				// console.log(this.infoList);
				this.oldInfoSwiperHeight = this.infoList.length * 150;
			},
			// tab栏 切换
			async tabChange(index) {
				let stop = 0
				// 如果切换到瀑布流轮播
				if (index == 1) {
					this.swiperHeight = this.oldFeedSwiperHeight;
					stop = this.oldFeedScrollTop;
				} else {
					this.swiperHeight = this.oldInfoSwiperHeight;
					stop = this.oldInfoScrollTop;
				}
				this.swiperCurrent = index;
				await this.$nextTick((index) => {
					uni.pageScrollTo({
						scrollTop: stop,
						duration: 0
					});
				})

			},
			// swiper滑动结束触发事件
			async animationfinish(e) {
				let current = e.detail.current;
				let stop = 0
				// 如果切换到瀑布流轮播
				if (current == 0) {
					this.swiperHeight = this.oldFeedSwiperHeight;
					stop = this.oldFeedScrollTop;
				} else {
					this.swiperHeight = this.oldInfoSwiperHeight;
					stop = this.oldInfoScrollTop;
				}
				this.swiperCurrent = current;
				await this.$nextTick((current) => {
					uni.pageScrollTo({
						scrollTop: stop,
						duration: 300
					});
				})

			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.swiperCurrent == 0) {
					console.log("动态滚动到底部了！");
					if (this.canRequestFeeds == "yes") {
						uni.showToast({
							title: "请求中...",
							icon: "loading",
							duration: 600,
						});
						this.canRequestFeeds = "no";
						this.$u.api
							.getRecommendList({
								category: 0,
								limit: 12,
								offset: this.feedList.length,
							})
							.then((feeds) => {
								// uni.hideToast();
								if (feeds.length > 0) {
									console.log(feeds);
									this.swiperHeight = this.oldFeedSwiperHeight + 1200;
									this.feedList = [...this.feedList, ...feeds];
									this.saveFeedList = this.feedList;
									let timer = setTimeout(() => {
										clearTimeout(timer);
										this.canRequestFeeds = "yes";
									}, 500);
								} else {
									this.canRequestFeeds = "end";
									uni.showToast({
										title: "到底啦！",
										icon: "success",
										duration: 1500,
									});
								}
							});
					}
					if (this.canRequestFeeds == "end") {
						// uni.hideToast();
						uni.showToast({
							title: "到底啦！",
							icon: "success",
							duration: 1500,
						});
					}

				} else {
					console.log("咨询滚动到底部了！");
					if (this.canRequestInfos == "yes") {
						uni.showToast({
							title: "请求中...",
							icon: "loading",
							duration: 800,
						});
						this.canRequestInfos = "no";
						this.$u.api
							.getInfos({
								limit: 8,
								offset: this.infoList.length,
							})
							.then((infos) => {
								// uni.hideToast();
								if (infos.length > 0) {
									this.infoList = [...this.infoList, ...infos];
									this.swiperHeight = this.infoList.length * 150;
									this.oldInfoSwiperHeight = this.swiperHeight;
									let timer = setTimeout(() => {
										clearTimeout(timer);
										this.canRequestInfos = "yes";
									}, 500);
								} else {
									this.canRequestInfos = "end";
									uni.showToast({
										title: "到底啦！",
										icon: "success",
										duration: 1500,
									});
								}
							});
					}
					if (this.canRequestInfos == "end") {
						// uni.hideToast();
						uni.showToast({
							title: "到底啦！",
							icon: "success",
							duration: 1500,
						});
					}
				}
			},
			// 跳转到动态列表页面
			gotoLink(url) {
				if (url.indexOf('rfeeds') > -1) {
					uni.switchTab({
						url
					})
					return;
				}
				if (url.indexOf('otherUser') > -1) {
					const user = $storage.get("user");
					if (!!user && !!user.id && user.id == url.split("=")[1]) {
						uni.switchTab({
							url: '/pages/newUser'
						})
						return;
					}
				}
				uni.navigateTo({
					url,
				});
			},
			gotoTab(url) {
				uni.switchTab({
					url
				})
			},
			// 点击顶部banner
			clickBanner() {
				// 数据埋点
				this.$$Rangers.event('banner_click', {
					banner_name: '小程序首页banner轮播图',
					platform: '小程序',
				})
			},
			// 点赞按钮
			async clickLove(item) {
				if (!this.canLoveTag) return;
				this.canLoveTag = false;
				let loginStatus = await this.$u.api.checkLogin();
				if (!loginStatus) {
					this.canLoveTag = true;
					return;
				}
				if (item.type == 1) {
					if (item.data.liked) {
						--item.data.likes_count;
						item.data.liked = false;
						await this.$u.api.unlikeThisInfo({
							id: item.data.id
						});
						uni.showToast({
							title: "取消点赞",
							icon: "success",
							duration: 1000,
						});
						this.canLoveTag = true;
					} else {
						++item.data.likes_count;
						item.data.liked = true;
						await this.$u.api.likeThisInfo({
							id: item.data.id
						});
						// 数据埋点
						this.$$Rangers.event('interact', {
							interact_type: '点赞',
							content_type: '资讯',
							platform: '小程序',
						})
						uni.showToast({
							title: "点赞成功",
							icon: "success",
							duration: 1000,
						});
						this.canLoveTag = true;
					}
				} else {
					// 动态点赞
					if (item.data.has_liked) {
						--item.data.like_count;
						item.data.has_liked = false;
						await this.$u.api.unlikeThisFeed({
							id: item.data.id
						});
						uni.showToast({
							title: "取消点赞",
							icon: "success",
							duration: 1000,
						});
						this.canLoveTag = true;
					} else {
						++item.data.like_count;
						item.data.has_liked = true;
						await this.$u.api.likeThisFeed({
							id: item.data.id
						});
						// 数据埋点
						this.$$Rangers.event('interact', {
							interact_type: '点赞',
							content_type: '动态',
							platform: '小程序',
						})
						uni.showToast({
							title: "点赞成功",
							icon: "success",
							duration: 1000,
						});
						this.canLoveTag = true;
					}
				}
				this.$refs.uWaterfall.modify(item.id, "data", item.data);
			},
			/**
			 * 获取用户信息
			 */
			async getUserInfo() {
				const user = $storage.get("user");
				if (!user) return;
				const notifications = await this.$u.api.getNewsList();
				// if(!notifications.badges) return ;
				// 所有消息数量
				let notificationNum = notifications.badges.like + notifications.badges.comment;
				if (notificationNum > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: notificationNum.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 2
					})
				}
				user.notificationNum = notificationNum;
				user.notificationNumLike = notifications.badges.like;
				user.notificationNumComment = notifications.badges.comment;
				// 做状态管理，进行信息通信
				this.$u.vuex("vuex_user", user);
			},


		},
	};
</script>
